<template>
	<view class="recommend-list">
		<block v-if="show">
			<view class="recommend-page-header class-info">
				<view class="class-info-left">
					<view class="class-name">
						<text class="class-name-cn">{{spaceInfo.space_name}}</text>
						<text class="class-name-en">{{spaceInfo.abbreviation}}</text>
					</view>
					<view class="class-des">{{spaceInfo.desc}}</view>
				</view>
				<view class="class-info-right"><image :lazy-load="true" mode="aspectFill" :src="spaceInfo.space_img"></image></view>
			</view>
			<view class="white-raidus"></view>
			<view class="recommend-list-box">
				<u-sticky h5-nav-height="0">
					<view>
						<view class="recommend-tabs" v-if="sortList.length">
							<u-tabs
								:list="sortList"
								:current="sortIndex"
								@change="sortTabChange"
								active-color="#141414"
								inactive-color="#666666"
								name="class_name"
								font-size="28">
							</u-tabs>
						</view>
						<pt-small-function
							@changeType="changeType" 
							:Multiple="true" 
							:stylePopList="style_list"
							:showSpace="false"
							:showClass="false"
							@clickItem="clickItem">
						</pt-small-function>
					</view>
				</u-sticky>
				<view class="fixed-blank"></view>
				<view class="recommend-item">
					<pt-product-items
						isWaterfall
						:showSort="false" 
						:object="{goods_list: goods_list}"
						:isBig="isBig"
						:noMore="true"
						@GoInfoAddFoot="GoInfoAddFoot"
						:isLogin="isLogin">
					</pt-product-items>
				</view>
			</view>
			<pt-loading-more v-if="isLoading"></pt-loading-more>
			<pt-nomore v-if="noMore"></pt-nomore>
			<pt-nothing 
				v-if="noMore && !goods_list.length" 
				:text="'暂无商品'" 
				bg-color="#FFF" 
				:isHigh="true" 
				icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
			</pt-nothing>
		</block>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				order_by: 'sort',
				shelf_id: '',
				style_id: '',
				class_id: '',
				style_list: [],
				spaceInfo: {},
				sortIndex: 0,
				sortList: [],
				isBig: false,
				goods_list: [],
				page: 0,
				noMore: false,
				isLoading: false,
				// 足迹参数
				is_home_jump: false,
				is_recomment: false,
				addFootParam: {
					start_time: '',
					end_time: '',
					stay_time: 0
				},
				isLogin: false
			};
		},
		onLoad(options) {
			this.shelf_id = options.shelf_id
			if(options.is_home_jump){
				this.is_home_jump = options.is_home_jump
			}
		},
		onShow() {
			if(uni.getStorageSync('userInfo')){
				this.isLogin = true
			}else{
				this.isLogin = false
			}
			this.addFootParam.start_time = parseInt(new Date().getTime() / 1000)
		},
		methods: {
			clickItem(e){
				this.order_by = e.sort
				this.style_id = e.style_id!=0?e.style_id:''
				this.noMore = false
				this.page = 0
				this.goods_list = []
				this.init()
			},
			init(){
				this.$u.api.GoodsSpaceList({
					shelf_id: this.shelf_id,
					order_by: this.order_by,
					style_id: this.style_id,
					class_id: this.class_id,
					asc: 2,
					page: this.page,
				}).then(res => {
					this.show = true
					this.isLoading = false
					this.spaceInfo = res.datas
					uni.setNavigationBarTitle({
						title: res.datas.space_name
					})
					this.style_list = res.datas.style_list
					this.sortList = res.datas.class_list
					if(res.datas.list.length){
						res.datas.list.forEach(item => {
							this.goods_list.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			sortTabChange(e){
				this.sortIndex = e
				this.class_id = this.sortList[e].class_id?this.sortList[e].class_id:''
				this.page = 0
				this.noMore = false
				this.goods_list = []
				this.init()
			},
			changeType(e){
				if(e==1){
					this.isBig = true
				}else{
					this.isBig = false
				}
			},
			GoInfoAddFoot(){
				if(uni.getStorageSync('userInfo')){
					if(this.is_home_jump){
						this.addFoot('首页-空间-'+this.spaceInfo.name+'-列表-商品详情')
						
						this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
						this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
						this.addFoot('首页-空间-'+this.spaceInfo.name+'-列表')
					}
				}
			},
			// 足迹
			addFoot(where){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: this.addFootParam.stay_time,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1
				})
			}
		},
		onHide() {
			this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
			this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
			if(uni.getStorageSync('userInfo')){
				if(this.is_home_jump){
					this.addFoot('首页-空间-'+this.spaceInfo.name+'-列表')
				}
			}
		},
		onUnload() {
			this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
			this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
			if(uni.getStorageSync('userInfo')){
				if(this.is_home_jump){
					this.addFoot('首页-空间-'+this.spaceInfo.name+'-列表')
				}
			}
		},
		onReachBottom() {
			if(!this.noMore){
				this.isLoading = true
				this.page++
				this.init()
			}
		},
		mounted() {
			this.init()
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F7F7;
	}
	.recommend-list{
		.class-info{
			display: flex;
			padding: 30rpx;
			background-color: #F7F7F7;
			align-items: center;
			.class-info-left{
				flex: 1;
				min-width: 0;
				margin-right: 30rpx;
				.class-name{
					.class-name-cn{
						font-size: 36rpx;
						color: #28221F;
						margin-right: 20rpx;
						position: relative;
						display: inline-block;
						&::after{
							content: '';
							position: absolute;
							width: 20rpx;
							height: 4rpx;
							background-color: #F59359;
							border-radius: 4rpx;
							bottom: -10rpx;
							left: 50%;
							transform: translateX(-50%);
						}
					}
					.class-name-en{
						text-transform: uppercase;
						font-family: 'Arial';
						color: #6B6B6B;
						font-weight: 100;
					}
				}
				.class-des{
					margin-top: 40rpx;
					line-height: 44rpx;
					color: #909090;
					font-size: 24rpx;
				}
			}
			.class-info-right{
				width: 230rpx;
				height: 290rpx;
				image{
					width: 230rpx;
					height: 290rpx;
					border-radius: 16rpx;
				}
			}
		}
		.white-raidus{
			background-color: #F8F8F8;
			&::after{
				content: '';
				display: block;
				background-color: #FFF;
				height: 30rpx;
				border-radius: 16rpx 16rpx 0 0;
			}
		}
		.recommend-list-box{
			padding: 0 30rpx;
			.recommend-tabs{
				margin: 0 -30rpx;
				border-bottom: solid 2rpx #F7F7F7;
			}
		}
		.recommend-item{
			.product-items:last-child{
				border-bottom: none;
			}
		}
	}
</style>
